import React, { useEffect, useState } from 'react'
import {Button, Table, Tag, Modal,Popover, Switch} from 'antd'
import axios from 'axios'
import {DeleteOutlined,EditOutlined,ExclamationCircleOutlined} from '@ant-design/icons'

const {confirm} = Modal
export default function RightList() {
  // dataSource拿到的所有数据；初始值时一个空数组 通过后端数据拿到
  const [dataSource,setdataSource] = useState([])
//拿到后端数据渲染到页面
  useEffect(()=>{
    axios.get("http://localhost:5000/rights?_embed=children").then(res=>{
      // console.log(res.data);
      // 通过遍历找到children数组长度0的将他改为空
      const list = res.data
      // list.map((item) => item.children?.length === 0 ? item.children = "" : item.children);
      list.forEach((item)=>
        item.children.length==0 ?item.children="" : item.children
      )
      setdataSource(res.data)
    })
  },[])

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      // 定义样式用render是一个函数
      render:(id)=>{
        return <b>{id}</b>
      }
    },
    {
      title: '权限名称',
      dataIndex: 'title',
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      render:(key)=>{
        return <Tag color='orange'>{key}</Tag>
      }
    },
    {
      title: '操作',
      render:(item)=>{ //在操作项中传入形参一层一层传入为下面点击删除拿到数据
        return <div>
          <Button danger shape='round' icon={<DeleteOutlined />} onClick={()=>confirmMethod(item)}></Button>
          {/* Popover气泡卡片 开关  */}
          <Popover content={<div style={{textAlign:'center'}}>
            <Switch 
            checked={item.pagepermisson}
            onClick={()=>switchMethod(item)}
            ></Switch>
          </div>} title="页面配置项" trigger={item.pagepermisson===undefined ? '' :'click'}>
            {/* disabled 判断数据中有pagepermisson的才显示 */}
            <Button type="primary" shape='round' icon={<EditOutlined />} disabled={item.pagepermisson===undefined}></Button>
          </Popover>
        </div>
      }
    },
  ];

  const switchMethod = (item)=>{
    item.pagepermisson = item.pagepermisson===1 ? 0 :1
    // console.log(item);
    setdataSource([...dataSource])
    //和后端数据同步 用patch方法 put会导致数据被替换掉
    if(item.grade===1){
      axios.patch(`http://localhost:5000/rights/${item.id}`,{
        pagepermisson:item.pagepermisson
      })
    }else{
      axios.patch(`http://localhost:5000/children/${item.id}`,{
        pagepermisson:item.pagepermisson
      })
    }
  }
  //确认删除提示操作
  const confirmMethod= (item)=>{
    confirm({
      title: '你确定要删除吗?',
      icon: <ExclamationCircleOutlined />,
      // content: 'Some descriptions',
      onOk() {
        // console.log('OK');
        deleteMethod(item)
      },
      onCancel() {
        // console.log('Cancel');
      },
    });
  }
//点击删除执行此方法 (在操作项中传入形参拿到点击删除时的数据)
  const deleteMethod = (item)=>{
    // console.log(item);
    //删除后要当前页面同步状态 + 后端数据也要同步
    //React中不让修改原状态，要保持原状态一直都可以用）
    if(item.grade===1){
      setdataSource(dataSource.filter(data=>data.id!==item.id)) //页面状态（用.filter()过滤即可
      axios.delete(`http://localhost:5000/rights/${item.id}`)   //请求delete删除后端数据
    }else{
      // console.log(item.rightId);
      let list = dataSource.filter(data=>data.id===item.rightId)
      list[0].children = list[0].children.filter(data=>data.id!==item.id)
      // console.log(list);
      setdataSource([...dataSource])
      axios.delete(`http://localhost:5000/children/${item.id}`) 
    }
  }

  return (
    <div>
      <Table dataSource={dataSource} columns={columns} pagination={{pageSize:5}}/>
    </div>
  )
}
